<template>
  <a-form
    class="warn-handle-dialog"
    ref="form"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item v-if="mode === '指派'" label="人员" name="receiver_id">
      <a-select
        v-model:value="form.receiver_id"
        showArrow
        allow-clear
        show-search
        mode="multiple"
        :options="userList"
        option-filter-prop="label"
        :placeholder="rules.receiver_id.message"
      />
    </a-form-item>
    <a-form-item v-if="mode === '指派'" label="处理时限">
      <a-date-picker
        show-time
        v-model:value="form.deadline"
        value-format="YYYY-MM-DD HH:mm:ss"
        :disabled-date="disabledDate"
        style="width: 100%"
        :getPopupContainer="getPopupContainer"
      />
    </a-form-item>
    <a-form-item label="意见/建议">
      <a-textarea v-model:value="form.content" placeholder="请输入内容" :auto-size="{ minRows: 4, maxRows: 30 }" />
    </a-form-item>
  </a-form>
</template>

<script>
import get from 'lodash-es/get.js';
import dayjs from 'dayjs';
import { alarmDevAssign, alarmDevHandle, getAssignPeoplesList } from '@gis/lib/api/index.js';
import { handleFormRes } from '@gis/lib/utils/resolver.js';

export default {
  name: 'warn-handle-dialog',
  props: {
    mode: {
      type: String,
      default: '指派',
      validator: (v) => ['指派', '无效'].indexOf(v) >= 0,
    },
    extraParams: { type: Object, default: () => ({}) },
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      rules: {
        receiver_id: { required: true, message: '请选择指派人员' },
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      userList: [],
      fileList: [],
      form: {
        receiver_id: undefined,
        deadline: undefined,
        content: undefined,
      },
    };
  },
  created() {
    if (this.mode === '指派') {
      this.getUserList();
    }
  },
  methods: {
    getPopupContainer() {
      return this.$el;
    },
    async getUserList() {
      const params = { type: 2 };
      const data = this.handleCommonResult(await getAssignPeoplesList(params));
      const ids = data.map((item) => item.id);
      this.userList = data.map((item) => {
        return Object.assign({}, item, {
          label: `${item.name}(${item.type_name})`,
          value: item.id,
        });
      });
      if (ids.includes(this.data.people_id)) {
        this.form.receiver_id = this.data.people_id;
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    disabledDate(current) {
      return current && current < dayjs().add(-1, 'day').endOf('day');
    },
    upChange(res) {
      if (res.file.status === 'done') {
        this.fileList = res.fileList;
      } else if (res.file.status === 'removed') {
        this.fileList = res.fileList;
      }
    },
    async onOk() {
      const valid = await this.$refs.form.validate();
      if (!valid) return false;
      const { form } = this;
      let params = Object.assign(
        {
          id: this.data.id,
          content: form.content,
        },
        this.form,
        this.extraParams
      );
      if (this.mode === '指派') {
        // if (!form.receiver_id || !form.receiver_id.length) {
        //   return this.$emssage.error('请选择人员');
        // }
        params.receiver_id = Array.isArray(form.receiver_id) ? form.receiver_id.join(',') : form.receiver_id;
        return await handleFormRes(alarmDevAssign, params, {
          onOk: (res) => {
            if (res && res.code == 200) {
              this.$emit('assignSuccess', get(res, 'data', {}));
            }
          },
        });
      }
      if (this.mode === '无效') {
        return await handleFormRes(alarmDevHandle(params));
      }
    },
  },
};
</script>

<style scoped lang="less">
.warn-handle-dialog {
  padding: 20px;
}
</style>
